<template>
  <div class="background">
    <!-- 头部 -->
    <market-header></market-header>
    <!-- main -->
    <div class="container">
      <div class="left">
        <router-link to="/userInfo"
                     tag="div"
                     class="navigator active">账号管理
        </router-link>
        <router-link to="/collect"
                     tag="div"
                     class="navigator">我的收藏
        </router-link>
        <router-link to="/seller"
                     tag="div"
                     class="navigator">我的商品
        </router-link>
        <router-link to="/collect"
                     tag="div"
                     class="navigator">我的购买
        </router-link>
      </div>
      <div class="right">
        <div v-if="!isChange">
          <el-form ref="form"
                   label-width="120px">
            <el-form-item label="头像：">
              <img :src="userImg"
                   alt="用户头像"
                   class="userImg">
            </el-form-item>
            <el-form-item label="用户名：">
              <span>{{ username }}</span>
            </el-form-item>
            <el-form-item label="手机号：">
              <span>{{ userPhone }}</span>
            </el-form-item>
            <el-form-item label="邮箱：">
              <span>{{ userMail }}</span>
            </el-form-item>
            <el-form-item label="性别：">
              <span>{{ userSex }}</span>
            </el-form-item>
            <el-form-item label="学校：">
              <span>{{ userSchool }}</span>
            </el-form-item>
            <el-form-item label="我的收货地址：">
              <el-popover placement="right"
                          width="500"
                          trigger="click">
                <el-table :data="userAddress">
                  <el-table-column width="100"
                                   property="name"
                                   label="姓名"></el-table-column>
                  <el-table-column width="150"
                                   property="phone"
                                   label="手机号"></el-table-column>
                  <el-table-column width="300"
                                   property="address"
                                   label="地址"></el-table-column>
                </el-table>
                <el-button slot="reference">点击查看</el-button>
              </el-popover>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="change">修改资料</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="change"
             v-else>
          <el-form ref="form"
                   label-width="120px">
            <el-form-item label="头像：">
              <el-upload class="avatar-uploader"
                         action="http://localhost:3000/users/upload"
                         :show-file-list="false"
                         :on-success="success"
                         :before-upload="beforeUpload"
                         :data="data">
                <img :src="imageUrl"
                     class="avatar">
              </el-upload>
              <!-- 恢复默认头像 -->
              <span class="recover"
                    @click="recoverImg">恢复默认</span>
            </el-form-item>
            <el-form-item label="用户名：">
              <el-input v-model="username"
                        :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号*：">
              <el-input v-model="userPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱*：">
              <el-input v-model="userMail"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-radio v-model="userSex"
                        label="男">男</el-radio>
              <el-radio v-model="userSex"
                        label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="学校：">
              <el-input v-model="userSchool"></el-input>
            </el-form-item>
            <el-form-item label="我的收货地址：">
              <el-popover placement="right"
                          width="480"
                          trigger="click">
                <div class="address_container">
                  <div class="address address_name">&nbsp;姓名</div>
                  <div class="address address_phone">&nbsp;手机号</div>
                  <div class="address address_address">&nbsp;地址</div>
                </div>
                <div class="address_content"
                     v-for="(item,index) in userAddress"
                     :key="index">
                  <input type="text"
                         v-model="item.name"
                         class="address_name"
                         placeholder="请输入姓名">
                  <input type="text"
                         v-model="item.phone"
                         class="address_phone"
                         placeholder="请输入手机号">
                  <input type="text"
                         v-model="item.address"
                         class="address_address"
                         placeholder="请输入地址">
                  <input type="button"
                         value="删除"
                         @click="remove(index)">
                </div>
                <input type="button"
                       value="添加新地址"
                       @click="add">
                <el-button slot="reference">管理收货地址</el-button>
              </el-popover>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="save">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import $ from "jquery"
export default {
  components: {
    MarketHeader,
    MarketFooter
  },
  data () {
    return {
      value: new Date(),
      isChange: false,
      username: '', // 用户名
      password: '', // 密码
      userMail: '', // 邮箱
      userPhone: '', // 手机号
      userImg: '', // 头像
      userSex: '', // 性别
      userAddress: [], // 收货地址
      userSchool: '', // 学校
      imageUrl: '', // 修改头像的地址
      data: {}, // 上传头像的对象
      _id: ''
    }
  },
  created () {
    this.$http.post('http://localhost:3000/userInfo', { username: localStorage.getItem('username') }).then(response => {
      this.username = response.data.data.username; // 用户名
      this.password = response.data.data.password; // 密码
      this.userMail = response.data.data.userMail; // 邮箱
      this.userPhone = response.data.data.userPhone; // 手机号
      this.userImg = response.data.data.userImg; // 头像
      this.userSex = response.data.data.userSex; // 性别
      this.userAddress = response.data.data.userAddress; // 收货地址
      this.userSchool = response.data.data.userSchool;// 学校
      this._id = response.data.data._id;
    })
  },
  methods: {
    change () {
      this.isChange = !this.isChange;
      this.imageUrl = this.userImg;
    },
    save () {
      let flag = true;
      this.userAddress.forEach(item => {
        if (item.name == '' || item.phone == '' || item.address == '') {
          alert('地址信息不能为空');
          flag = false;
        }
      })
      if (flag == true) {
        this.isChange = !this.isChange;
        this.userImg = this.imageUrl;
        let obj = {
          _id: this._id,
          userMail: this.userMail,
          userPhone: this.userPhone,
          userImg: this.userImg,
          userSex: this.userSex, // 性别
          userAddress: this.userAddress, // 收货地址
          userSchool: this.userSchool // 学校
        }
        this.$http.post('http://localhost:3000/users/update', obj).then(response => {
          if (response.data.status == 0) {
            alert(response.data.message);
          } else {
            alert(response.data.message);
          }
        })
      }
    },
    success (response, file) {
      this.imageUrl = `http://localhost:3000${response.img.file.path.slice(6)}`;
    },
    beforeUpload () {
      let $imgFile = $(".el-upload__input").get(0);
      this.data = { "upload": $imgFile.files[0] };
    },
    recoverImg () {
      this.imageUrl = 'http://localhost:3000/uploadcache/upload_a6ebb92781e98e4239ad04b4e255535c.jpg';
    },
    remove (index) {
      this.userAddress.splice(index, 1);
    },
    add () {
      this.userAddress.push({ name: '', phone: '', address: '' });
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 50px auto;
  height: 500px;
  position: relative;

  .left {
    width: 180px;
    height: 100px;
    padding: 20px;

    .navigator {
      width: 70px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin: 5px auto;
      cursor: pointer;
    }
    .navigator:hover {
      color: #f40;
    }
    .active {
      color: #f40;
    }
  }
  .right {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 800px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 20px;

    .userImg {
      width: 60px;
      height: 60px;
    }
    .change {
      width: 500px;

      .avatar-uploader {
        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .el-upload:hover {
          border-color: #409eff;
        }
        .avatar {
          width: 60px;
          height: 60px;
          display: inline-block;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 60px;
          height: 75px;
          line-height: 60px;
          text-align: center;
        }
      }
      .recover {
        position: absolute;
        top: 32px;
        left: 65px;
        cursor: pointer;
        font-size: 12px;
      }
      .address_content {
        .address {
          font: 14px "Microsoft YaHei";
          font-weight: bold;
          color: #424242;
          display: inline-block;
          height: 23px;
          padding: 12px 0;
        }
        .address_name {
          width: 80px;
        }
        .address_phone {
          width: 100px;
        }
        .address_address {
          width: 240px;
        }
        input {
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>